<template>
  <div class="wrapper">
    <SearchForm
      class="selectGroup"
      :searchHandle="searchHandle"
      :no-border="'border:none'"
    />
    <Table
      class="container"
      :table-data="tableData"
      :row-header="rowHeader"
      :page-obj="pageObj"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      :table-option="tableOption"
      @handleButton="handleButton"
      element-loading-text="拼命加载中..."
      element-loading-background="rgba(0, 0, 0, 0.1)"
    />
    <el-dialog
      ref="dialogRef"
      :visible="dialogVisible"
      :title="dialogType==='new'?'添加加班记录':'编辑加班记录'"
      :close-on-click-modal="false"
      @close="dialogVisible=false"
    >
      <SearchForm
        v-if="isShow"
        ref="searchForm"
        :rules="rules"
        :inline="true"
        :label-width="'150px'"
        :search-form="diallogForm"
        :search-data="dialogData"
        :search-handle="dialogHandle"
        no-border="border:none"
        class="detialSearch"
      />
    </el-dialog>
  </div>
</template>
<script>
import Table from "@/components/Table/baseTable";
import SearchForm from "@/components/searchForm/index.vue";
import {
  UserQuery,
  AddOvertime,
  QueryOvertime,
  DelOvertime,
} from "@/api/mange.js";
import { Task } from "@/api/task.js";

export default {
  name: "work",
  components: {
    Table,
    SearchForm,
  },
  data() {
    return {
      isShow: true,
      dialogVisible: false,
      dialogType: "new",
      rules: {
        name: [
          {
            trigger: "change",
            required: true,
          },
        ],
        workTime: [
          {
            trigger: "change",
            required: true,
          },
        ],
      },
      dialogData: {
        relationProjectId: "",
        userId: "",
        startId: "",
        endTime: "",
        overtimeReason: "",
        fallsStateId: "",
      },
      diallogForm: [
        {
          type: "Select",
          label: "项目:",
          options: [],
          prop: "relationProjectId",
          clearable: true,
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "Select",
          label: "姓名:",
          options: [],
          prop: "userId",
          clearable: true,
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "Date",
          label: "计划时间:",
          prop: "startTime",
          clearable: true,
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "Date",
          label: " -- ",
          prop: "endTime",
          clearable: true,
          clear: () => {},
          change: (val) => {},
        },
        {
          type: "Input",
          label: "加班原因:",
          prop: "overtimeReason",
          class: "overtimeReason",
          clearable: true,
          clear: () => {},
          input: (val) => {},
        },
        {
          type: "Select",
          label: "是否调休:",
          options: [
            {
              label: "是",
              value: 1,
            },
            {
              label: "否",
              value: 2,
            },
          ],
          prop: "fallsStateId",
          clearable: true,
          clear: () => {},
          change: (val) => {},
        },
      ],
      dialogHandle: [
        {
          type: "primary",
          label: "确定",
          handle: (item) => {
            this.dialogVisible = false;
            if (this.dialogType == "new") {
              AddOvertime(this.dialogData).then((res) => {
                this.QueryOvertime();
              });
            } else if (this.dialogType == "edit") {
              AddOvertime(this.dialogData).then((res) => {
                this.QueryOvertime();
              });
            }
          },
        },
        {
          type: "primary",
          label: "取消",
          handle: () => {
            this.dialogVisible = false;
          },
        },
      ],
      searchHandle: [
        {
          type: "primary",
          label: "添加",
          handle: (item) => {
            this.dialogVisible = true;
            this.dialogType = 'new'
            this.dialogData = {
              relationProjectId: "",
              userId: "",
              startTime: "",
              endTime: "",
              overtimeReason: "",
              fallsStateId: "",
            };
          },
        },
      ],
      tableData: [],
      pageObj: {
        total: 0,
        size: 10,
        sizes: [10, 30, 50, 100],
        currentPage: 1,
      },
      rowHeader: [
        {
          label: "排序",
          width: "25px",
          prop: "index",
          render: (params, index) => {
            return (
              index + 1 + (this.pageObj.currentPage - 1) * this.pageObj.size
            );
          },
        },
        {
          prop: "projectName",
          label: "项目",
        },
        {
          prop: "userName",
          label: "姓名",
        },
        {
          prop: "overtimeReason",
          label: "加班原因",
        },
        {
          label: "是否调休",
          prop: "fallsStateName",
        },
        {
          label: "开始时间",
          prop: "startTime",
        },
        {
          label: "结束时间",
          prop: "endTime",
        },
      ],
      tableOption: {
        label: "操作",
        width: "320",
        options: [
          {
            type: "primary",
            methods: "edit",
            label: "编辑",
          },
          {
            type: "danger",
            methods: "delete",
            label: "删除",
          },
        ],
      },
    };
  },
  mounted() {
    this.userQuery();
    this.queryTask();
    this.QueryOvertime();
  },
  methods: {
    handleCurrentChange(val) {
      this.pageObj.currentPage = val;
      this.QueryOvertime();
    },
    handleSizeChange(val) {
      this.pageObj.currentPage = 1;
      this.pageObj.size = val;
      this.QueryOvertime();
    },
    QueryOvertime() {
      QueryOvertime({
        page: this.pageObj.currentPage,
        limit: this.pageObj.size,
      }).then((res) => {
        if (res.code == "200") {
          this.tableData = res.result.records;
          this.pageObj.total = res.result.total;
        }
      });
    },
    queryTask() {
      this.diallogForm[0].options = [];
      Task({}).then((res) => {
        if (res.code == "200") {
          res.result.map((item) => {
            this.diallogForm[0].options.push({
              label: item.projectName,
              value: item.id,
            });
          });
        }
      });
    },
    userQuery() {
      this.diallogForm[1].options = [];
      UserQuery({}).then((res) => {
        res.result.map((item) => {
          this.diallogForm[1].options.push({
            label: item.name,
            value: item.id,
          });
        });
      });
    },
    handleButton(methods, data, row, index) {
      if (methods === "delete") {
        this.$confirm("此操作将永久删除该条信息, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-custom-cancel",
          type: "warning",
        }).then(() => {
          DelOvertime({
            id: row.id,
          }).then((res) => {
            this.QueryOvertime();
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        });
      } else if (methods === "edit") {
        this.dialogType = "edit";
        this.dialogVisible = true;
        row.userId = parseInt(row.userId)
        // console.log('row',row)
        this.dialogData = row;
      }
    },
  },
};
</script>
<style lang="scss">
.wrapper {
  width: 100%;
  .nameInp {
    .el-form-item__content {
      width: 74%;
    }
  }
  .titleInp {
    .el-form-item__content {
      width: 74%;
    }
  }
  .detialSearch {
    .InlineBlock {
      display: flex;
      justify-content: end;
      margin-right: 8%;
    }
  }
}
</style>